<template>
  
  
  <view>
    <!-- 搜索 -->
    <view class="search">
      <my-search @click="toSearch"></my-search>
    </view>
    
    
    <!-- 分类 -->
    <view class="cateList">
  
      <!-- 左侧的滚动视图区域 {height: wheight}+'px' --> 
            <scroll-view class="scroll-left" scroll-y="true" :style="{height:wheight}+'px'">
              <view @click="showRightCate(item)" v-for="(item,index) in cateList" :key="index"
              :class="item.cat_id==scleftIndex ? 'view active' : 'view'"
              >
                {{item.cat_name}}
              </view>
            </scroll-view>
            
            
            <!-- 右侧的滚动视图区域 :style="{height:wheight}+'px'"-->
            <scroll-view class="scroll-right" scroll-y="true" :style="{height:wheight}+'px'" >
              <view class="Box" v-for="(item,index) in scrightData" :key="index">
                
                <view class="view-title">/{{item.cat_name}}/</view>
                
                <view class="view-img">
                  <view class="view-img-item" v-for="(it,i) in item.children" :key="i" @click="toCateDetail(it)">
                    <image :src="it.cat_icon.replace('dev','web')"></image>
                    <text>{{it.cat_name}}</text>
                  </view>                  
                </view> 
              </view>         
            </scroll-view>
            
    </view>
  </view>
</template>

<script>
  import badge from "@/mixins/tabbar.js"
  
  export default {
    mixins:[badge],
    data() {
      return {
        wheight:0,//滑轮高度
        cateList:[],//存储分类数据
        scleftIndex:1,//存储左侧栏点击的下标
        scrightData:[],//存储右侧栏的数据
        scrolltop:0,
      };
    },
    onLoad() {
      const sysInfo = uni.getSystemInfoSync()  //获取当前系统信息
      this.wheight = sysInfo.windowHeight//高度动态赋值
      
      this.getCate()//获取分类数据
    },
    methods:{
      
      async getCate(){
        const {data:res} = await uni.$http.get("/api/public/v1/categories")
        if(res.meta.status == 200){
          this.cateList = res.message
          this.scrightData = res.message[0].children
        }else{
          return uni.showMsg()
        }
      },
      
      
      showRightCate(item){
          this.scleftIndex = item.cat_id//点击时将下标获取
          this.scrightData = item.children//点击时获取右侧数据
          this.scrolltop = this.scrolltop==0?1:0
          // console.log("我的："+this.scleftIndex)
          // console.log("它的："+item.cat_level)
      },
      
      
      toCateDetail(it){
        uni.navigateTo({
          url: '/subpkg/goods-list/goods-list?cat_id='+it.cat_id
        });
      },
      
      
      toSearch(){
        uni.navigateTo({
          url:"/subpkg/search-page/search-page"
        })
      },
      
    }
  }
</script>

<style lang="scss">
  .search{
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .cateList{ 
    display: flex;
    .scroll-left{
      width: 120px;
      // position: fixed;
      // top: 0;
      // left: 0;
      // z-index: 999;
      .view{
        text-align: center;
        background-color: #eeeeee;
        line-height: 70px;
        
        &.active{//如果class后面有active这个类，就执行以下样式
          background-color: white;
          position: relative;
          
          &::before{//伪元素
            content: ' ';
            background-color: #aa0000;
            width: 3px;
            height: 30px;
            display: block;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
          }
        }
        
      }
    }
    .scroll-right{
      // margin-left: 40%;
      .Box{}
      .view-title{
        text-align: center;
        font-weight: bold;
        margin-bottom: 15rpx;
      }
      .view-img{
        display: flex;
        flex-wrap: wrap;//自动换行
        .view-img-item{
          width: 33.3%;
          display: flex;
          flex-direction: column;//延垂直排列
          align-items: center;
          margin-bottom: 10px;
          image{
            width: 60px;
            height: 60px;
          }
        }
      }
    }
  }
</style>
